<template>
  <div class="welcome">
   <el-card class="box-card">
    <div slot="header" class="hdTitle">
      <i class="el-icon-message-solid"></i>
      <span>欢迎使用青年帮后台管理系统</span>
    </div>
    <div class="main">
   <el-row :gutter='20'>
    <el-col :span="12" >
      <el-card shadow="never">
        <el-calendar>
        </el-calendar>
      </el-card>
    </el-col>
    <el-col :span="12" >
      <el-card shadow="never" class="weather" v-for="(item,index) in tqList" :key="index">
        <div slot="header" class="weatherTitle">
          <i class="el-icon-sunny"></i>
          <span>最近三天的天气</span>
        </div>
        <div class="weatherMain">

        <el-card class="item" shadow="never">
          <div class="itemInner">
            <div class="left">
              <div class="icon">
              <img :src="getTqIcon(item.conditionIdDay)" alt="">
              </div>
              <div class="num">
                {{item.tempNight+"~"+item.tempDay}}
              </div>
              <div class="text">
                {{item.conditionDay}}/{{item.windDirDay}}
              </div>
            </div>
            <div class="right">
              <div class="day">
                {{getDayText(index)}}
              </div>
              <div class="time">
                {{item.predictDate}}
              </div>
            </div>
          </div>
        </el-card>

        </div>
      </el-card>
    </el-col>
  </el-row>
  </div>
  </el-card>
  </div>
</template>

<script>
import { weatherData } from '@/nextwork/nextworks'
export default {
  data () {
    return {
      tqList: []
    }
  },
  mounted () {
    var myData = window.sessionStorage.getItem('myData')
    myData = JSON.parse(myData)
    if (myData) {
      var oldDate = myData.time
      var newDate = Date.now()
      if (oldDate - newDate > 1000 * 60 * 60) {
        this.getTianqi()
      } else {
        this.tqList = myData.sessList
      }
    } else {
      this.getTianqi()
    }
  },
  methods: {
    // 天气图片
    getTqIcon (num = 0) {
      return require('@/assets/images/tqIcon/W' + num + '.png')
    },
    getDayText (index) {
      var day
      if (index == 0) {
        day = '今天'
        return day
      } else if (index == 1) {
        day = '明天'
        return day
      } else if (index == 2) {
        day = '后天'
        return day
      } else {
      }
    },
    // 获取天气的函数
    getTianqi () {
      weatherData().then(res => {
        this.tqList = res.data.data.forecast
        var myData = { sessList: this.tqList, time: Date.now() }
        myData = JSON.stringify(myData)
        window.sessionStorage.setItem('myData', myData)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.welcome{
  width: 100%;
  .box-card{
    width: 100%;
    margin: 24px;
    .hdTitle{
      font-size: 30px;
      color: #409EFF;
      font-weight: 700;
      span{
        padding-left: 10px;
      }
    }
    .main{
      .el-calendar{
        height: 500px;
      }
    }
    .weatherTitle{
      font-size: 18px;
      color: #67C23A;
      i{
        font-size: 22px;
        padding-right: 10px;
      }
    }
    .weatherMain{
      .item{
        height: 90px;
        .itemInner{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left{
            display: flex;
            align-items: center;
            .icon{
              img{
                width: 48px;
                height: 48px;
              }
            }
            .num{
              font-size: 38px;
              font-weight: 600;
              padding: 0 20px;
              color: #333;
              position: relative;
              &::after{
                content: "";
                width: 10px;
                height: 10px;
                display: block;
                border: 2px solid #333;
                border-radius: 50%;
                position: absolute;
                right: 5px;
                top: 0;
                box-sizing: border-box;
              }
            }
            .text{
              font-size: 15px;
              color: #409EFF;
              transform: translateY(10px);
            }
          }
          .right{
            text-align: right;
            .day{
              color: #67C23A;
              font-size: 25px;
              font-weight: 600;
              padding-bottom: 10px;
            }
            .time{
              color: #aaa;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>
